<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="100px" class="search">
		  <el-form-item label="供应商名称">
		    <el-input v-model="name" placeholder="请输入供应商名称"></el-input>
		  </el-form-item>
		  <el-form-item label="供应材料名称">
		    <el-input v-model="name" placeholder="请输入供应材料名称"></el-input>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- 添加表单 -->
		<el-button type="success" @click="isAdd()">添加</el-button>
		<el-dialog title="添加供应商" :visible.sync="dialogFormVisible" >
			<el-form :model="form">
				<el-form-item label="供应商名称" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="供应商地址" :label-width="formLabelWidth">
					<el-input v-model="form.address" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="供应材料" :label-width="formLabelWidth">
					<el-input v-model="form.materials" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系人" :label-width="formLabelWidth">
					<el-input v-model="form.linkman" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" :label-width="formLabelWidth">
					<el-input v-model="form.phone" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 表格分页 -->
		<el-table
		    :data="tableData"
		    border
			fit
		    style="width: 100%">
		    <el-table-column fixed prop="name" label="供应商名称"></el-table-column>
			<el-table-column prop="address" label="供应商地址"></el-table-column>
		    <el-table-column prop="materials" label="供应材料"></el-table-column>
		    <el-table-column prop="linkman" label="联系人"></el-table-column>
			<el-table-column prop="phone" label="联系电话"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
		        <el-button type="text" size="small" @click="isDelete()">删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		name:"PlayerINformation",
		data(){
			return{
				name:"",
				type:"",
				nickname:"",
				uid:"",
				tableData: [{
						name:'岳阳彩电公司',
						address: '岳阳市岳阳楼区成华大道彩电路1号',
						materials:'电视、冰箱、空调',
						linkman:'迪迦',
						phone:'13144444444'
					}, {
						name:'岳阳食材大市场',
						address: '岳阳市岳阳楼区成华大道市场路1号',
						materials:'水果、蔬菜',
						linkman:'泰罗',
						phone:'13122222222'
					}, {
						name:'岳阳医疗设备厂',
						address: '岳阳市岳阳楼区成华大道医疗路1号',
						materials:'血压器、心电器',
						linkman:'赛文',
						phone:'13133333333'
					}, {
						name:'岳阳娱乐器材厂',
						address: '岳阳市岳阳楼区成华大道娱乐路1号',
						materials:'老虎机、跳舞机',
						linkman:'雷欧',
						phone:'13155555555'
					}],
				dialogFormVisible: false,
				form: {
					name: '',
					address: '',
					materials: '',
					linkman: '',
					phone: '',
					delivery: false,
				},
				formLabelWidth: '120px'
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
				this.form.name=row.name;
				this.form.address=row.address;
				this.form.materials=row.materials;
				this.form.linkman=row.linkman;
				this.form.phone=row.phone;
				this.dialogFormVisible=true;
			},
			search(){
				console.log(this.name,this.nickname,this.uid)
			},
			isAdd(){
				this.form.name='';
				this.form.address='';
				this.form.materials='';
				this.form.linkman='';
				this.form.phone='';
				this.dialogFormVisible=true;
			},
			isDelete() {
				this.$confirm('此操作将删除该供应商, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
